<template>
    <div class="index-nav">
        <div class="nav-top">
            <div class="category">
                <div class="category-item">
                    <span>前端开发：</span>
                    <span class="sub-title">HTML5 / Vue.js / Node.js</span>
                    <span>></span>
                </div>
                <div class="category-item">
                    <span>后端开发：</span>
                    <span class="sub-title">Java / Python / Go</span>
                    <span>></span>
                </div>
                <div class="category-item">
                    <span>移动开发：</span>
                    <span class="sub-title">Flutter / Android / iOS</span>
                    <span>></span>
                </div>
                <div class="category-item">
                    <span>计算机基础：</span>
                    <span class="sub-title">算法 / 数学 / 数据库</span>
                    <span>></span>
                </div>
                <div class="category-item">
                    <span>前沿技术：</span>
                    <span class="sub-title">AI / 大数据 / 数据分析</span>
                    <span>></span>
                </div>
                <div class="category-item">
                    <span>测试运维：</span>
                    <span class="sub-title">自动化测试 / 容器</span>
                    <span>></span>
                </div>
                <div class="category-item">
                    <span>更多方向：</span>
                    <span class="sub-title">产品设计 / UI设计 / 游戏</span>
                    <span>></span>
                </div>
            </div>
            <div class="carousel">
                <el-carousel :interval="5000" arrow="always" height="382px">
                    <el-carousel-item v-for="item in 4" :key="item">
                        <el-image src="https://img1.sycdn.imooc.com/65a891840001e13316000682.jpg"
                            style="height: 100%; width: 100%;"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="nav-bottom">
            <div class="bottom-item" v-for="item, index in 5">
                <el-image src="https://img1.sycdn.imooc.com/601bd59c0001fc1800900090.jpg"></el-image>
                <div>
                    <h4>Java工程师</h4>
                    <p>助力成就硬核工程师</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "index-vue"
}
</script>

<style scoped>
.index-nav {
    height: 470px;
    display: flex;
    flex-direction: column;
}

.nav-top {
    display: flex;
}

.category {
    width: 256px;
    background: #39364d;
    border-top-left-radius: 8px;
    height: 382px;
}

.carousel {
    flex: 1;
    height: 382px;
    border-top-right-radius: 8px;
    overflow: hidden;
}

.category-item {
    line-height: 50px;
    cursor: pointer;
    color: #fff;
    padding: 0 14px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 50px;
    transition: all .1s;
    font-size: 14px;
    position: relative;
}

.sub-title {
    font-size: 12px !important;
}

.nav-bottom {
    flex: 1;
    background: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .3);
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.bottom-item{
    display: flex;
    align-items: center;
}

.bottom-item .el-image {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: all .2s;
    margin-right: 10px;
}

.bottom-item h4{
    font-family: "HarmonyOS_Sans_Regular";
    font-size: 16px;
    color: #1c1f21;
    margin-bottom: 4px;
}

.bottom-item p{
    font-size: 12px;
    color: #545c63;
}
</style>